<template>
  <el-row>
    <el-card class="box-card">
      <el-col :span="24">
        <date-range-picker  class="date-item" v-model="createTime"></date-range-picker>
        <el-button  icon="el-icon-search" circle @click="getdata"></el-button>
      </el-col>
      <el-col :span="24">
        <Meter :chartData="parameter" />
      </el-col>

    </el-card>
  </el-row>

</template>


<script>
  import statisticalMeter from '@/api/statistical/meter'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import crudProductModel from '@/api/product/productModel'
  import DateRangePicker from '@/components/DateRangePicker'
  import Meter from '@/components/Echarts/Meter'

  const defaultForm = {
  }
  export default {
    name: 'StatisticalMeter',
    components: {pagination, crudOperation, rrOperation, udOperation, Meter,DateRangePicker,statisticalMeter},
    mixins: [presenter(), header(), form(defaultForm), crud()],
    dicts: ['graph_type'],
    cruds() {
      return CRUD({title: '工序节拍', url: '', idField: 'id', sort: 'id,desc', crudMethod: {...statisticalMeter}})
    },
    data() {
      return {
        drawer: false,
        innerVisible: false,
        projecting: false,
        createTime: [],
        header: [],
        parameter: {
          xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          data: [8, 7, 10, 6, 9, 11, 10, 13, 12, 11],
        },
        permission: {
          add: ['admin', 'statisticalMeter:add'],
          edit: ['admin', 'statisticalMeter:edit'],
          del: ['admin', 'statisticalMeter:del']
        },
        rules: {},
        queryTypeOptions: [
        ],
      }
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeSubmit]() {
        return true
      },

      //查询
      getdata(){
        statisticalMeter.getEquipmentMeter({createTime:this.createTime}).then(res => {
          this.parameter = res
        })
      }

    },
    created: function () {//这里是定时器
      setInterval(this.getdata, 2000 * 60);
    },
    mounted() {
      statisticalMeter.getEquipmentMeter({}).then(res => {
        this.parameter = res
      })
    }
  }
</script>

<style scoped>
  span {
    margin-left: 10px;
  }
</style>
